<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        ref="queryForm"
        :inline="true"
        :model="queryParams"
        @submit.native.prevent
        label-width="65px"
      >
        <el-form-item label="管控规则" prop="url">
          <common-input
            v-model="queryParams.url"
            @enter="handleQuery"
            clearable
          />
        </el-form-item>
        <el-form-item label="控制类型" prop="controlType">
          <el-select v-model="queryParams.controlType">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="限流" value="0"></el-option>
            <el-option label="黑名单" value="1"></el-option>
            <el-option label="白名单" value="2"></el-option>
            <el-option label="签名" value="3"></el-option>
            <el-option label="访问时间" value="5"></el-option>
            <el-option label="时间戳" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="启用" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </common-search>
    <el-row :gutter="10" slot="tools">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          @click="handleAdd"
          v-hasPermi="['apisecurity:applicationManage:add']"
          >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          type="danger"
          icon="el-icon-delete"
          :disabled="!showBatch"
          @click="handleDelete"
          v-hasPermi="['apisecurity:applicationManage:remove']"
          >批量删除
        </el-button>
      </el-col>
    </el-row>

    <common-table
      slot="content"
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="管控规则"
        align="left"
        prop="url"
        show-overflow-tooltip
      />
      <el-table-column
        label="控制类型"
        align="left"
        prop="controlType"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.controlType === 0
              ? "限流"
              : scope.row.controlType === 1
              ? "黑名单"
              : scope.row.controlType === 2
              ? "白名单"
              : scope.row.controlType === 3
              ? "签名"
              : scope.row.controlType === 4
              ? "二次认证"
              : scope.row.controlType === 5
              ? "访问时间"
              : scope.row.controlType === 6
              ? "时间戳"
              : ""
          }}
        </template>
      </el-table-column>

      <el-table-column
        label="管控值"
        prop="controlValueCode"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="备注" prop="remark" show-overflow-tooltip />

      <el-table-column
        label="创建时间"
        prop="createTime"
        show-overflow-tooltip
      />
      <el-table-column label="状态" align="center" width="80px">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status === 0">启用 </el-tag>
          <el-tag type="danger" v-else-if="scope.row.status === 1"
            >停用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="160" fixed="right">
        <template slot-scope="scope">
          <template>
            <el-button type="text" @click="getInfo(scope.row)">详情 </el-button>

            <el-button
              type="text"
              @click="handleShake(scope.row)"
              :disabled="scope.row.isDisabledForShake"
            >
              {{ scope.row.status === 0 ? "停用" : "启用" }}
            </el-button>

            <el-button type="text" @click="handleUpdate(scope.row)">
              编辑
            </el-button>
            <el-button type="text" @click="handleDelete(scope.row)"
              >删除
            </el-button>
          </template>
        </template>
      </el-table-column>
    </common-table>

    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <Add ref="add" @getList="getList"> </Add>
    <common-info-dialog
      :title="detailstitle"
      :visible.sync="detailsOpen"
      @cancel="cancel"
      :info-loading="detailsLoading"
    >
      <common-info-table>
        <common-info-table-cell label="管控规则">
          {{ Info.url }}
        </common-info-table-cell>
        <common-info-table-cell label="控制类型">
          {{
            Info.controlType === 0
              ? "限流"
              : Info.controlType === 1
              ? "黑名单"
              : Info.controlType === 2
              ? "白名单"
              : Info.controlType === 3
              ? "签名"
              : Info.controlType === 4
              ? "二次认证"
              : Info.controlType === 5
              ? "访问时间"
              : Info.controlType === 6
              ? "时间戳"
              : ""
          }}
        </common-info-table-cell>
        <common-info-table-cell
          :label="
            Info.controlType === 0
              ? '访问量'
              : Info.controlType === 1 || Info.controlType === 2
              ? '访问源'
              : Info.controlType === 3
              ? '秘钥'
              : Info.controlType === 5
              ? '工作日'
              : Info.controlType === 6
              ? '管控值'
              : ''
          "
          class="controlValue"
        >
          <div style="min-width: 140px">
            <template
              v-if="
                (Info.controlType === 3 && isShowValue) ||
                Info.controlType !== 3
              "
            >
              {{ Info.controlValue }}
            </template>
            <template v-else>****************</template>
          </div>

          <el-button
            style="margin-left: 10px"
            v-if="Info.controlType === 3"
            type="text"
            @click="isShowValue = !isShowValue"
            >{{ isShowValue ? "隐藏" : "展示" }}</el-button
          >
        </common-info-table-cell>
        <common-info-table-cell label="创建时间">
          {{ Info.createTime }}
        </common-info-table-cell>
        <common-info-table-cell label="状态">
          {{ Info.status === 0 ? "启用" : "停用" }}
        </common-info-table-cell>
        <common-info-table-cell label="备注">
          {{ Info.remark }}
        </common-info-table-cell>
      </common-info-table>
    </common-info-dialog>
  </common-list>
</template>

<script>
import {
  deletes,
  getInfo,
  getPageList,
  updateStatus,
} from "@/api/apisecurity/visitcontrol/index";
import BaseList from "@/mixins/BaseList.vue";
import Add from "./components/add.vue";
export default {
  components: { Add },
  name: "index",
  mixins: [BaseList],
  data() {
    return {
      detailsLoading: false,
      buttonLoading: false,
      detailstitle: "访问控制详情",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: null,
        url: null,
        controlType: null,
      },
      total: 0,
      Info: {},
      detailsOpen: false,
      rules: {},
      open: false,
      title: false,
      list: [],
      loading: false,
      isShowValue: false,
    };
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
    },
    getList() {
      this.loading = true;

      getPageList(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.list = res.rows?.reduce((r, c) => {
              r.push({
                ...c,
                isDisabledForShake: false,
                controlValueCode:
                  c.controlType === 3 ? "****************" : c.controlValue,
              });
              return r;
            }, []);
            this.total = res.total;
            this.handleListTips(res);
          } else {
            this.list = [];
            this.total = 0;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    getInfo(row) {
      this.detailsOpen = true;
      this.detailsLoading = true;
      getInfo({ id: row.id })
        .then((res) => {
          if (res && res.code === 200) {
            this.Info = res.data;
          } else {
            this.Info = [];
          }
        })
        .finally(() => {
          this.detailsLoading = false;
        });
    },
    handleUpdate(row) {
      if (row.status === 0) {
        return this.$GlobalErrorConfirm("编辑", "启用状态下不允许编辑");
      } else {
        this.$refs.add.show(row);
      }
    },
    handleDelete(row) {
      if (row && row.id) {
        if (row.status === 0) {
          return this.$GlobalErrorConfirm("删除失败", "启用状态下不允许删除");
        }
      } else {
        try {
          this.ids.forEach((f) => {
            if (this.list.find((v) => v.id === f).status === 0) {
              throw false;
            }
          });
        } catch {
          return this.$GlobalErrorConfirm("删除失败", "启用状态下不允许删除");
        }
      }
      const ids = row.id || this.ids.join(",");
      this.$GlobalDeleteConfirm()
        .then(() => {
          deletes({ ids }).then((res) => {
            if (res && res.code === 200) {
              this.queryParams.pageNum = 1;

              this.$GlobalSuccessMessage("删除成功");
              if (
                this.queryParams.pageNum > 1 &&
                ids.split(",").length === this.list.length
              ) {
                this.queryParams.pageNum -= 1;
              }
              this.getList();
            } else {
              this.$GlobalErrorConfirm("删除失败", res.msg);
            }
          });
        })
        .catch(() => {});
    },
    handleAdd() {
      this.$refs.add.show();
    },
    cancel() {
      this.isShowValue = false;
      this.detailsOpen = false;
    },
    changeStatus(row) {
      return new Promise((resolve, reject) => {
        let status = row.status === 1 ? 0 : 1;
        updateStatus({ status, id: row.id })
          .then((res) => {
            if (res && res.code === 200) {
              this.$GlobalSuccessMessage("操作成功");
              this.list.find((item) => {
                return item.id === row.id;
              }).status = row.status === 1 ? 0 : 1;
              resolve(res);
            } else {
              this.$GlobalErrorConfirm("操作失败", res.msg).then();
              reject();
            }
          })
          .catch(() => reject());
      });
    },
  },

  created() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .controlValue {
  .info-table-row-value {
    display: flex;
    align-items: center;
  }
}
</style>
